<template>
  <cube-scroll
    ref="scroll"
    :scroll-events="['scroll']"
    @pulling-down="onPullingDown"
    @pulling-up="onPullingUp"
    @scroll="onScroll"
    :options="options"
    :data="data"
  >
    <slot></slot>
  </cube-scroll>
</template>

<script>
export default {
  name: "Scroll",
  props: {
    data: {
      type: Array
    },
    refreshing: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    },
    clicked: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      currentIndex: 1,
      pullDownRefreshThreshold: 60,
      pullDownRefreshStop: 40,
      pullDownRefreshTxt: "刷新成功",
      pullUpLoadThreshold: 0,
      pullUpLoadMoreTxt: "加载中",
      pullUpLoadNoMoreTxt: "没有更多数据"
    };
  },
  computed: {
    options() {
      return {
        pullDownRefresh: this.pullDownRefreshObj,
        pullUpLoad: this.pullUpLoadObj,
        scrollbar: false,
        click: this.clicked
      };
    },
    pullDownRefreshObj: function() {
      return this.refreshing
        ? {
            threshold: parseInt(this.pullDownRefreshThreshold),
            txt: this.pullDownRefreshTxt
          }
        : false;
    },
    pullUpLoadObj: function() {
      return this.loading
        ? {
            threshold: parseInt(this.pullUpLoadThreshold),
            txt: {
              more: this.pullUpLoadMoreTxt,
              noMore: this.pullUpLoadNoMoreTxt
            }
          }
        : false;
    }
  },
  methods: {
    onPullingDown() {
      this.currentIndex = 1

      this.$emit("refresh", this.$refs.scroll);
    },
    onPullingUp() {
      this.$emit("loadMore", ++this.currentIndex, this.$refs.scroll);
    },
    onScroll(pos) {
      this.$emit('scroll', pos);
    }
  }
};
</script>
<style lang="stylus" scoped></style>
